<!--  -->
<template>
   <div class='goodList'>
        <header-login @logn="loginTip"></header-login>
        <bread-nav><span slot="name">goodList</span></bread-nav>
        <div class="accessory-result-page accessory-page">
            <div class="container">
                <div class="filter-nav">
                    <span class="sortby">Sort by:</span>
                    <a href="javascript:void(0)" class="default cur">Default</a>
                    <a href="javascript:void(0)" class="price" @click="sortGood">Price 
                        <span class="iconfont" :class="init.sort?'icon-xiangshang':'icon-xiangxia '"></span>
                    </a>
                    <a href="javascript:void(0)" class="filterby stopPop" @click.stop="showFilterPop">Filter by</a>
                </div>
                <div class="accessory-result">
                     <div class="filter stopPop" id="filter">
                         <dl class="filter-price">
                            <dt>Price:</dt>
                            <dd>
                                <a href="javascript:void(0)" :class="{'cur':priceChecked==='all'}" @click="priceCheckedEvent('all')">
                                    ALL
                                </a>
                            </dd>
                            <dd v-for="(price,index) in priceFilter" :key="index">
                                <a href="javascript:void(0)" :class="{'cur':priceChecked===index}" @click="priceCheckedEvent(index)">
                                    {{price.startPrice}}-----{{price.endPrice}}
                                </a>
                            </dd>
                         </dl>
                     </div>
                     <div class="accessory-list-wrap">
                         <div class="accessory-list col-4">
                             <ul>
                                 <li v-for="(v,index) in goodsList" :key="index">
                                     <div class="pic">
                                         {{v.productImage}}
                                         <a href="#"><img v-lazy="'static/'+v.productImage" alt="" :key="v.productImage"></a>
                                     </div>
                                     <div class="main">
                                         <div class="name">{{v.productName}}</div>
                                         <div class="price">$ {{v.salePrice}}</div>
                                         <div class="btn-area">
                                              <a href="javascript:;" class="btn btn--m" @click.stop.prevent="addCart(v.productId)">加入购物车</a>
                                         </div>
                                     </div>
                                 </li>
                             </ul>
                             <div v-infinite-scroll ="loadMore" infinite-scroll-disabled ="busy" infinite-scroll-distance ="10">
                                 <span style="height:50px;line-height:50px;text-align:center;color:red;font-size:20px;">加载.......</span>
                             </div>
                         </div>
                     </div>
                </div>
            </div>
        </div>
        <model :model="modelTip.type" ref="model" v-if="modelTip.showflg">
            <span slot="title">{{modelTip.tipText}}</span>
            <i slot="content">
                {{modelTip.tipContent}}
            </i>
            <strong slot="btn">
                <button type="button" @click="hiden">确定</button>
            </strong>
        </model>
        <model :model="modelTip2.type" ref="model" v-if="modelTip2.showflg">
            <span slot="title">{{modelTip2.tipText}}</span>
            <i slot="content">
                {{modelTip2.tipContent}}
            </i>
            <strong slot="btn">
                <router-link to="/cart">购物车</router-link>
                <button type="button" @click="hiden">继续购物</button>
            </strong>
        </model>
        <v-footer></v-footer>
   </div>
</template>

<script>
    import HeaderLogin from '@/components/HeaderLogin'
    import BreadNav from '@/components/BreadNav'
    import model from '@/components/model'
    import footer from '@/components/footer'
    export default {
       components: {HeaderLogin,BreadNav,model,"v-footer":footer},
       data() {
           return {
               goodsList:[],
               priceFilter:[
                   {
                      startPrice:'0.0000',
                      endPrice:'100.00'
                  },
                  {
                      startPrice:'100.10',
                      endPrice:'150.00'
                  },
                  {
                      startPrice:'150.10',
                      endPrice:'200.00'
                  }
               ],
               priceChecked:'all',
               init:{
                   sort:true,
                   page:1,
                   pageSize:5,
                   minPrice:0,
                   maxPrice:0
               },
               busy:true,
               modelTip:{
                   tipText:"",
                   tipContent:"",
                   type:"",
                   showflg:false
               },
               modelTip2:{
                   tipText:"",
                   tipContent:"",
                   type:"",
                   showflg:false
               }
           };
       },
       computed: {
           filter(){
               let filerPrice = this.priceChecked;
               let minPrice = 0;
               let maxPrice = 0;
                switch (filerPrice) {
                    case 'all':
                        minPrice = 0;
                        maxPrice = 0;
                        break;
                    case '0':
                        minPrice = 0;
                        maxPrice = 100;
                        break;
                    case '1':
                        minPrice = 100.1;
                        maxPrice = 150;
                        break;
                    case '2':
                        minPrice = 150.1;
                        maxPrice = 200;
                        break;
                    default:
                        break;
                }
                // console.log(minPrice,maxPrice);
                return {minPrice,maxPrice}
           }
       },
       watch: {
       },
       methods: {
           fztip(a,b,c,d){
                this.modelTip.tipText = a;
                this.modelTip.tipContent = b;
                this.modelTip.type = c;
           },
           fztip2(a,b,c,d){
                this.modelTip2.tipText = a;
                this.modelTip2.tipContent = b;
                this.modelTip2.type = c;
           },
           hiden(){
              this.fztip("","","");
              this.fztip2("","","");
              this.modelTip.showflg = false;
              this.modelTip2.showflg = false;
           },
           loginTip(param){
               switch (param.res) {
                   case "success":
                       this.fztip("正确",`${param.type}成功`,"success");
                       break;
                    case "err":
                        this.fztip("错误",param.type+"失败,请重新登录","err");
                        break;
                    case "tip":
                        this.fztip("警告",param.type,"tip");
                        break;
                    case "question":
                        this.fztip("问题",param.type,"question");
                        break;
                   default:
                       break;
               }
               this.modelTip.showflg = true;
            //   this.$refs.model.show();
           },
           goodList(flag) {
             let params = {
                 sort:this.init.sort?1:-1,
                 page:this.init.page,
                 pageSize:this.init.pageSize,
                 minPrice:this.init.minPrice,
                 maxPrice:this.init.maxPrice
             };
             axios.get("/goods/list",{
                 params:params
             })
                .then(response => {
                    let {errno,data} = response.data;
                    if(!errno) {
                        if(flag){
                            this.goodsList = [...this.goodsList,...data.list];
                          
                            if(data.count<this.init.pageSize){
                                this.busy=true;
                            }else{
                                this.busy=false;
                            }
                        }else{
                            this.goodsList = data.list;
                            this.busy=false;
                        }
                        
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
           },
           loadMore(){
            //    if(this.init.page==1) return;
              this.busy = true;
              setTimeout(()=> {
                this.init.page++;
                this.goodList(true)
              },1000)
           },
           sortGood(){
               this.init.sort = !this.init.sort;
               this.init.page = 1;
               this.goodList();
           },
           addCart(id){
               let _this = this;
               axios.get('/goods/addCart', {
                  params:{ productId:id}
                })
                .then(function (response) {
                    let {data,errno} = response.data;
                   if(!errno){
                       _this.modelTip2.type="success";
                        _this.fztip2("正确提示","成功添加到购物车","success")
                        _this.$store.commit("setCount",{count:1,init:false})              
                        _this.modelTip2.showflg = true;
                   }
                   else if(errno==10111){
                     _this.loginTip({res:"tip",type:"添加购物车失败,请先登录"})
                   }
                   else {
                       _this.loginTip({res:"err",type:"数据错误，请刷新页面登录再操作"})
                   }
                })
                .catch(function (error) {
                    console.log(error);
                });
           },
           priceCheckedEvent(param){
                this.priceChecked = param.toString();
                let {minPrice,maxPrice} = this.filter;
                this.init.minPrice=minPrice;
                this.init.maxPrice=maxPrice;
                this.init.page = 1;
                this.goodList(false);
           }

       },
       created() {
             this.busy=true;
             this.goodList(false);
       },
       mounted() {
    
       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
    .filter{
        width: 220px;
        padding: 0 20px 0 20px;
        color: #605F5F;
        -webkit-transition: right .5s ease-out;
        transition: right .5s ease-out;
    }
    .container{
        width: 100%;
        .filter-nav{
            padding: 0 20px;
            line-height: 70px;
            height: 70px;
            margin: 30px;
            text-align: right;
            background:#fff;
            a{padding-left:10px;}
            .filterby{display: none}
        }
        .accessory-result{
            display: flex;
            .filter{
                margin-right: 25px;
                dl{
                    min-height: 180px;
                    margin-bottom: 50px;
                }
                dt{
                    margin-bottom: 15px;
                    font-family: "moderat", sans-serif;
                    letter-spacing: .25em;
                    text-transform: uppercase;
                    font-weight: bold;
                }
                dd{
                    line-height: 1.2em;
                    margin: 20px 0;
                    a:hover,.cur{
                        -webkit-transition: padding-left .3s ease-out;
                        transition: padding-left .3s ease-out;
                        border-left: 2px solid #ee7a23;
                        padding-left: 15px;
                        color: #ee7a23;
                    }
                    .cur{
                        font-weight: bold;
                    }
                    a{
                        display: block;
                        padding: 5px 0;
                        font-size:16px;
                        -webkit-transition: padding-left .3s ease-out;
                        transition: padding-left .3s ease-out;
                    }
                }
            }
            .accessory-list-wrap{
                flex:1;
            }
            .accessory-list > ul:after{
                visibility: hidden;
                display: block;
                content: " ";
                clear: both;
            }
            .accessory-list > ul > li{
                float: left;
                width: 23.80952%;
                margin-right: 1.5873%;
                margin-bottom: 1.5873%;
                background: #fff;
                border: 2px solid #e9e9e9;
                -webkit-transition: all .5s ease-out;
                transition: all .5s ease-out;
                &:hover{
                    border-color: #ee7a23;
                    -webkit-transform: translateY(-5px);
                    -ms-transform: translateY(-5px);
                    transform: translateY(-5px);
                    -webkit-box-shadow: 0 0 10px #999;
                    box-shadow: 0 0 10px #999;
                    -webkit-transition: all .5s ease-out;
                    transition: all .5s ease-out;

                }
            }
            .accessory-list.col-4 > ul > li {
                width: 23.80952%;
                margin-right: 1.5873%;
                margin-bottom: 1.5873%;
            }
            .accessory-list.col-4 > ul > li:nth-child(4n) {
                margin-right: 0;
            }

            .accessory-list.col-5 > ul > li {
                width: 18.73016%;
                margin-right: 1.5873%;
                margin-bottom: 1.5873%;
            }

            .accessory-list.col-5 > ul > li:nth-child(5n) {
                margin-right: 0;
            }

            .accessory-list .pic {
                overflow: hidden;
            }
            .accessory-list .pic a {
                display: block;
                width: 100%;
                height: 0;
                padding-bottom: 100%;
                border-bottom:2px solid #e9e9e9;
            }

            .accessory-list .pic img {
                width: 100%;
                
            }

            .accessory-list .main {
                padding: 10px 10px 10px 10px;
            }
            .accessory-list .main .name {
                height: 30px;
                line-height: 30px;
                padding-bottom: 10px;
                font-family: "moderat", sans-serif;
                font-weight: bold;
                overflow: hidden;
            }

            .accessory-list .main .price {
                float: left;
                line-height: 30px;
                color: #d1434a;
                font-size: 1.25em;
            }

            .accessory-list .main .quantity {
            float: right;
            }

            .accessory-list .main .btn-area {
                clear: both;
                padding-top: 10px;
            }

            .accessory-list .main .btn-area .btn {
                width: 100%;
            }

            .accessory-list.col-4 > ul > li:nth-child(4n) {
                margin-right: 1.5873%;
            }

            .accessory-list.col-4 > ul > li:nth-child(3n) {
                margin-right: 0;
            }

            .accessory-list.col-5 > ul > li {
                width: 23.80952%;
                margin-right: 1.5873%;
                margin-bottom: 1.5873%;
            }


            @media only screen and (max-width: 991px) {
                .accessory-list.col-4 > ul > li {
                    width: 32.27513%;
                    margin-right: 1.5873%;
                    margin-bottom: 1.5873%;
                }

                .accessory-list.col-4 > ul > li:nth-child(4n) {
                    margin-right: 1.5873%;
                }

                .accessory-list.col-4 > ul > li:nth-child(3n) {
                    margin-right: 0;
                }

                .accessory-list.col-5 > ul > li {
                    width: 23.80952%;
                    margin-right: 1.5873%;
                    margin-bottom: 1.5873%;
                }

                .accessory-list.col-5 > ul > li:nth-child(5n) {
                    margin-right: 20px;
                }

                .accessory-list.col-5 > ul > li:nth-child(4n) {
                    margin-right: 0;
                }

                .accessory-list .main .name {
                    font-size: 1.3rem;
                }

                .accessory-list .main .btn-area .btn {
                    font-size: 1.2rem;
                }
            }
            @media only screen and (max-width: 767px) {
                .accessory-list {
                    font-size: 1.2rem;
                }

                .accessory-list.col-4 > ul > li, .accessory-list.col-5 > ul > li {
                    width: 100%;
                    margin-bottom: 10px;
                    padding: 10px;
                    border: none;
                    border-top: 1px solid #e9e9e9;
                    border-bottom: 1px solid #e9e9e9;
                }

                .accessory-list.col-4 > ul > li:hover, .accessory-list.col-5 > ul > li:hover {
                    border-color: none;
                    -webkit-transform: none;
                    -ms-transform: none;
                    transform: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    -webkit-transition: none .5s ease-out;
                    transition: none .5s ease-out;
                }

                .accessory-list .pic {
                    float: left;
                    width: 110px;
                    height: 110px;
                    border: 1px solid #e9e9e9;
                }

                .accessory-list .pic a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding-bottom: 0;
                }

                .accessory-list .main {
                    padding: 0 0 0 125px;
                }

                .accessory-list .main:after {
                    visibility: hidden;
                    display: block;
                    content: " ";
                    clear: both;
                }

                .accessory-list .main .price {
                    float: none;
                }

                .accessory-list .main .quantity {
                    float: left;
                }

                .accessory-list .main .name {
                    height: auto;
                    min-height: 50px;
                }

                .accessory-list .main .btn-area {
                    padding: 0;
                    clear: none;
                    float: right;
                }

                .accessory-list .main .btn-area .btn {
                    height: 30px;
                    line-height: 30px;
                    padding-left: .8em;
                    padding-right: .8em;
                    font-size: 1rem;
                    letter-spacing: .1em;
                }
            }
            
        }
    }
</style>